<template>
  <div>
    <el-row :gutter="16" justify="start">
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-card shadow="hover" class="mr-5px mt-5px mb-5px col-elec-add">
          <div class="flex items-center justify-center card-elec-add">
            <!-- <span>
              <el-icon><Plus /></el-icon>
            </span> -->
            <div style="cursor: pointer;"  @click="openForm('create')" v-hasPermi="['system:user:create']" >+新增电子称</div>
          </div>
        </el-card>
      </el-col>

      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24" v-for="(item, index) in list" :key="`dynamics-${index}`">
        <el-card shadow="hover" class="mr-5px mt-5px mb-5px card-electronic">
          <div class="flex">
            <el-avatar :src="avatar" :size="50" class="mr-16px align-top electronc-icon">
              <img src="@/assets/imgs/electronc.png" alt="" />
            </el-avatar>
            <div>
              <div class="text-20px">
                {{ item.name }}
              </div>
              <div class="mt-10px text-14px text-gray-500">
                {{ item.ip }}
              </div>
              <div class="text-14px text-gray-500">
                {{ item.port }}
              </div>
            </div>
          </div>
          <el-divider />
          <div class="flex text-14px text-gray-400 -mb-10px -mt-10px justify-around items-center">
            <el-button type="primary" link @click="openForm('update', item.id)">编辑</el-button>
            <el-divider direction="vertical" class="text-26px"/>
            <div class="">
              <el-switch class="text-14" v-model="item.status" active-text="启用" inactive-text="关闭" 
                :active-value="1"
                :inactive-value="0"
              @change="handleStatusChange(item)"
               inline-prompt />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="mt-10 justify-center">
      <el-pagination background layout="prev, pager, next" :total="list.length" />
    </el-row>
  </div>
  <!-- 新增/修改对话框 -->
<electronicFrom ref="formRef" @success="getList" />
</template>

<style lang="scss" scoped>
  .card-elec-add{
    height: 135.8px !important;
    background: #efefef;
  }
  .card-electronic{
    height: 177.4px !important;
  }
  .col-elec-add{
    background: #efefef;
  }
  .electronc-icon {
    padding: 10px;
    background: #f4f4f4;
  }
</style>

<script lang="ts" setup>
  import * as ElectronicScaleApi from '@/api/hcxly/electronicScale/Index';
  import electronicFrom from './electronicFrom.vue';
  import { CommonStatusEnum } from '@/utils/constants'

  defineOptions({ name: 'ElectronicScale' });

  const router = useRouter() // 路由
  const message = useMessage() // 消息弹窗
  const { t } = useI18n() // 国际化
  
  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const list = ref([]) // 列表的数据

  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    id: undefined,
    name: undefined,
    ip: undefined,
    port: undefined
  })
  
  /** 查询列表 */
  const getList = async () => {
    loading.value = true
    try {
      const data = await ElectronicScaleApi.getElectronicScale(queryParams)
      console.log(data)
      list.value = data.list
      total.value = data.total
    } finally {
      loading.value = false
    }
  }

  //初始化
  onMounted(() => {
    getList()
  })

  /** 添加/修改操作 */
  const formRef = ref()
  const openForm = (type: string, id?: string) => {
    formRef.value.open(type, id)
  }
  
  /** 修改状态 */
  const handleStatusChange = async (row: ElectronicScaleApi.EleScaleVO) => {
    try {
      // 修改状态的二次确认
      const text = row.status === CommonStatusEnum.ENABLE ? '停用' : '启用'
      await message.confirm('确认要' + text + '该电子秤吗?')
      // 发起修改状态
      await ElectronicScaleApi.updateUserStatus(row.id, row.status)
      // 刷新列表
      await getList()
    } catch {
      // 取消后，进行恢复按钮
      row.status =
        row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
    }
  }
</script>
